<template>
  <div class="div">
    <div class="table">
      <el-row :gutter="20" v-for="num in parseInt(table.data.length/4 +1)" :key="num">
        <el-col :span="6" v-for="count in 4" :key="count">
          <div
            class="item"
            v-if="table.data[(num-1)*4 + (count-1)]"
            @mouseenter="enters($event)"
            @mouseleave="leaver($event)"
            @click="clickItem(table.data[(num-1)*4 + (count-1)])"
          >
            <el-image :src="table.data[(num-1)*4 + (count-1)].url" fit="fit"></el-image>
            <div class="keyword">{{table.data[(num-1)*4 + (count-1)].bookName}}</div>
            <div class="price">售价：{{table.data[(num-1)*4 + (count-1)].price}} 元</div>
            <div>月销：{{table.data[(num-1)*4 + (count-1)].monthlySales}}</div>
          </div>
        </el-col>
      </el-row>
      <!-- 页面分页栏 -->
      <el-pagination
        layout="total,prev, pager, next"
        :total="total"
        :current-page.sync="currentPage"
        @current-change="currentChange"
        @prev-click="prev"
        @next-click="next"
        :page-size="pageSize"
        width="100"
        align="center"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import GLOBAL from "../../Global.vue";
export default {
  props: {
    formData: {
      type: Object,
    },
  },
  data() {
    return {
      path: GLOBAL.BASE_URL,
      currentPage:"",
      total:0,
      pageStart:0,
      pageSize:40,
      table: {
        total: 0,
        data: [],
      },
    };
  },
  methods: {
    clickItem(item) {
      const { href } = this.$router.resolve({
        name: "商品详情",
        query: { id: item.id },
      });
      window.open(href, "_blank");
    },
        // 点击上一页调用
    prev(val) {
      console.log(val);
    },
    // 点击下一页调用
    next(val) {
      console.log(val);
    },
    currentChange(val){
      this.pageStart = (val - 1)*this.pageSize;
      this.getTable();
    },
    enters(event) {
      event.target.style.border = "1px solid #00cccc";
    },
    leaver(event) {
      event.target.style.border = null;
    },
    // 获取书籍信息
    getTable(value) {
      this.COMMON.httpPost(
        this,
        "bookOperation/getPages",
        { pageStart: this.pageStart, pageSize: this.pageSize ,value},
        (result) => {
          if (result.result === "SUCCESS") {
            this.total = result.total;
            result.list.forEach((e) => {
              e.url = this.path + "image/" + e.headPic;
            });
            this.table.data = result.list;
          }
        },
        (result) => {}
      );
      console.log(this.table.data.length / 4);
    },
  },
  mounted: function () {
    this.getTable(null);
  },
};
</script>
<style>
body {
  margin: 0px;
  padding: 0;
}
.table {
  margin-left: 100px;
  margin-right: 100px;
  height: 1px;
}
.item {
  margin: auto;
  padding: 20px;
}
.keyword {
  font: 12px/150% PingFangSC-Light, "helvetica neue", "hiragino sans gb", tahoma,
    "microsoft yahei ui", "microsoft yahei", simsun, sans-serif;
}
</style>